<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>公告滚动信息</title>
    <style>
        /*基本的设置*/
        *{
            padding:0;
            margin:0;
        }
        img {
            vertical-align: top;
        }

        ul{
            list-style: none;
        }


        body {
            font-family: 'Arial', "Microsoft YaHei UI";
        }

        h1{
            text-align: center;
        }

        .vertical-scroll-news {
            width: 400px;
            margin: 10px auto;
            overflow: hidden;
        }

        .vertical-scroll-news ul li,.horizontal-scroll-news ul li{
            padding-left:10px;
            padding-right:10px;
        }

        ul li:nth-child(odd) {
            background-color: orange;
        }

        ul li:nth-child(even) {
            background-color: #369;
        }


        .horizontal-scroll-news {
            width: 400px;
            height: 40px;
            margin: 10px auto;
            overflow: hidden;
        }

        .horizontal-scroll-news ul {
            overflow: hidden;
        }

        .horizontal-scroll-news ul li{
            float: left;
        }
    </style>

    <script>
        window.onload = function () {
            // 竖向滚动   需要设置行高和速度
            var vertical_scrollId = "vertical-scroll-news";
            var vertical_lineHeight = 45;
            var vertical_interval = 2000;
            startVerticalScroll(vertical_scrollId,vertical_lineHeight,vertical_interval);


            //横向滚动   需要设置     行宽  和  滚动速度
            var horizontal_scrollId = "horizontal-scroll-news";
            var horizontal_speed = 30;
            startHorizontalScroll(horizontal_scrollId,horizontal_speed);

            function startHorizontalScroll(scrollId, speed) {
                var scrollDiv = document.getElementById(scrollId),scrollDivWidth = scrollDiv.clientWidth;
                var ul = scrollDiv.children[0],ulWidth = 0,addChildCont = 0,startNum = 0,endNum = 0;
                var lis = ul.children;
                console.log(scrollDivWidth);
                for (var i = 0; i < lis.length; i++) {
                    var obj = lis[i];
                    ulWidth += obj.clientWidth;
                    if(ulWidth < scrollDivWidth){
                        addChildCont ++ ;
                    }
                    obj.style.height = scrollDiv.clientHeight + "px";
                    obj.style.lineHeight = scrollDiv.clientHeight + "px";
                }

                if (ulWidth<=scrollDivWidth){
                    return;
                }
                endNum = ulWidth;
                //需要添加   addChildCont+1   个孩子
                for (var i = 0; i < addChildCont+1; i++){
                    var li = lis[i].cloneNode(true);
                    ul.appendChild(li);
                    ulWidth += lis[i].clientWidth;
                }
                ul.style.width = ulWidth + "px";


                var timer = setInterval(function () {
                    startNum -- ;
                    startNum <= -endNum ? startNum = 0 : startNum;
                    ul.style.marginLeft = startNum + "px";
                },speed);
            }




            function startVerticalScroll(scrollId,lineHeight, interval) {
                var ul = document.getElementById(scrollId).children[0];
                ul.parentNode.style.height = lineHeight + "px";
                var lis = ul.children;
                for (var i = 0; i < lis.length; i++) {
                    var obj = lis[i];
                    obj.style.height = lineHeight + "px";
                    obj.style.lineHeight = lineHeight + "px";
                }

                var startTop = 0;
                var timer = null;
                var timeOut = null;

                var index = 0;
                timeOut = setTimeout(scrollFn,interval);
                function scrollFn() {
                    clearInterval(timer);
                    index == lis.length ? index = 1 : index++;
                    if (startTop == -(lis.length - 1) * lineHeight){
                        index = 1;
                        startTop = 0;
                        ul.style.marginTop = startTop + "px";
                    }
                    timer = setInterval(function () {
                        startTop-- ;
                        ul.style.marginTop = startTop + "px";
                        if (startTop == -index * lineHeight){
                            clearInterval(timer);
                            timeOut = setTimeout(scrollFn,interval);
                        }
                    },10);
                }
            }
        }
    </script>
</head>
<body>
    <h1>这是一个竖向无缝滚动的公告栏</h1>
    <div class="vertical-scroll-news" id="vertical-scroll-news">
        <ul>
            <li>这是滚动的新闻喔1</li>
            <li>这是滚动的新闻喔2</li>
            <li>这是滚动的新闻喔3</li>
            <li>这是滚动的新闻喔4</li>
            <li>这是滚动的新闻喔5</li>
            <li>这是滚动的新闻喔6</li>
            <li>这是滚动的新闻喔1</li>
        </ul>
    </div>
    <hr>
    <h1>这是一个横向无缝滚动的公告栏</h1>
    <div class="horizontal-scroll-news" id="horizontal-scroll-news">
        <ul>
            <li>滚动的新闻喔1</li>
            <li>这是滚动的新闻喔家啊发哈2</li>
            <li>这是滚动的新闻喔3</li>
            <li>这是滚动4</li>
            <li>这是滚动的新闻喔风华绝代和方法很烦5</li>
            <li>这是滚动的新闻喔6</li>
        </ul>
    </div>
</body>
</html>